<h1><img src="static/img/logo.png" width="192" height="77" alt="PayCal" title="Make your payments with Google Calendar"/></h1>  
<form  id="payment_form" action="/" method="post">
 <fieldset>
 <legend>New Payment</legend>
       <ul>
            <li><label id="name"  for="name" class="create">Name:</label><input name="name" type="text" /></li>
      		<li><label id="location" for="location" class="create">Location</label><input name="location" type="text" /></li>
      <li><label id="amount" for="amount" class="create">Amount:</label><input name="amount" type="text"/></li>
      <li><label  for="date" class="create">Date:</label><input name="date" type="text" id="date" /></li>
      <li><input type="submit"  value="Add Payment!"/></li>
      </ul>
 </fieldset>
</form>
<h2>Your Payments:</h2>
 {% if payments %}
<table summary="My Monthly Payments">
    <colgroup>
   	<col/>
    </colgroup>
    <thead>
    	<tr>
        	<th scope="col">Name</th>
            <th scope="col">Amount</th>
            <th scope="col">Day</th>
            <th scope="col">Where</th>
            <th scope="col"></th>
        </tr>
    </thead>
        		<tfoot>
				<tr>
					<th colspan="5" align="right">Total: {{total}}</th>
			   	  </tr>
        </tfoot>
    <tbody>

        {% for payment in payments %}
				<tr>
					<td>{{payment.name|escape}}</td>
					<td>{{payment.amount|escape}}</td>
					<td>{{payment.date|date:"d/M"|lower}}</td>
					<td>{{payment.location|escape}}</td>
				    <td>
                    <a href="/delete-payment?id={{payment.key.id}}">Delete</a>
                    </td>
			    </tr>
		{% endfor %}
	  {% endif %}
    </tbody>

</table>   



